A Line chart with a gradient fill

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var points = 365 *2,
            data   = [],
            last   = 16,
            max    = 50;

        // Create the data
        for (var i=0; i<points; i+=1) {
            
            last = (RGraph.random(-1,1) + last);
            last = Math.min(last, max);
            last = Math.max(last, 0);
            
            data.push(last);
        }

        var l1 = new RGraph.Line({
            id: 'cvs',
            data: data,
            options: {
                shadow: null,
                filled: true,
                fillstyle: 'Gradient(rgba(255,255,255,0.5):rgba(0,200,200,0.25))',
                numxticks: 8,
                labels: [
                    '','Q1 `10','',
                    '','\r\nQ2 `10','',
                    '','Q3 `10','',
                    '','\r\nQ4 `10','',
                    '','Q1 `11','',
                    '','\r\nQ2 `11','',
                    '','Q3 `11','',
                    '','\r\nQ4 `11',''
                ],
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                colors: ['rgb(33,200,200)'],
                gutterBottom: 50,
                noxaxis: true,
                noyaxis: true,
                tickmarks: null,
                textAccessible: true
            }
        }).draw();
    };
</script>